import React, { Component } from 'react';
import {
  Text,
  Button,
  View,
} from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:  
  static navigationOptions = ({ navigation }) => ({
    title: `和 ${navigation.state.params.user} 聊天`,
  });
  render() {
    // The screen's current route is passed in to `props.navigation.state`:  
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>和 {params.user} 聊天</Text>
      </View>
    );
  }
}

class RecentChatsScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>最近的聊天记录列表</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })} //Passing params  
          title="和露西聊天"
        />
      </View>
    );
  }
}

class AllContactsScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>所有的联系人列表</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Jane' })} //Passing params  
          title="和简聊天"
        />
      </View>
    );
  }
}

const MainScreenNavigator = TabNavigator({
  最近: { screen: RecentChatsScreen },
  全部: { screen: AllContactsScreen },
});

MainScreenNavigator.navigationOptions = {
  title: '我的聊天记录',
};

const SimpleAppReactNavigation = StackNavigator({
  Home: { screen: MainScreenNavigator },
  Chat: { screen: ChatScreen },
});

export default SimpleAppReactNavigation;


